<template>
  <div class="container">
    <el-button type="primary" @click="onOpen">打开内嵌抽屉</el-button>

    <inside-drawer :visible.sync="drawerVisible" title="详情">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </inside-drawer>
  </div>
</template>

<script>
import InsideDrawer from '@/components/inside-drawer';

export default {
  name: 'inside-drawer-example',
  components: { InsideDrawer },
  data() {
    return {
      drawerVisible: false,
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
    };
  },
  methods: {
    onOpen() {
      this.drawerVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
